<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>树人100-微信UI-1.0</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="weui.min.css">
    <link rel="stylesheet" href="cmgd.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--奥森图标-->
    <link rel="stylesheet" href="FontAwesome_4.2.0/css/font-awesome.min.css">
</head>
<body>

<div class="container" id="container">

    <!--顶部搜索-->
    <div class="page home js_show">


        <div class="page__bd" style="height: 100%;">
            <!--选择导航-->

            <div class="weui-tab" id="navbar">

                <div class="weui-search-bar" id="searchBar">
                    <form class="weui-search-bar__form">
                        <div class="weui-search-bar__box">
                            <i class="weui-icon-search"></i>
                            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索"
                                   required="">
                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                        </div>
                        <label class="weui-search-bar__label" id="searchText">
                            <i class="weui-icon-search"></i>
                            <span>搜索</span>
                        </label>
                    </form>
                    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                </div>
                <div class="weui-navbar">

                    <div class="weui-navbar__item weui-bar__item_on">
                        官方动态
                    </div>
                    <div class="weui-navbar__item">
                        文章中心
                    </div>
                </div>


                <div class="weui-tab__panel">

                    <div class="weui-panel articlelist">
                        <div class="weui-panel__hd">
                            <img src="logo.png" class="headPic">

                            <div class="userName">
                                <h4 class="weui-media-box__title "> cherishgyh</h4>

                                <p class="weui-media-box__desc addTime">2017-04-17 08:08:08</p>
                            </div>
                    <span class="weui-media-box__title addEdit">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">编辑</a>
                    </span>
                        </div>
                        <div class="weui-panel__bd">
                            <div class="weui-media-box weui-media-box_text">
                                <p class="weui-media-box__desc">
                                    <i class="fa fa-book"> #咖啡咖啡</i>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球...
                                </p>

                                <p>
                                    <img src="http://wbs.hzhus.com/public/upload/ad/2017/03-24/fafb920acdae272cdbdd35f23b6ecc58.jpg">
                                </p>

                            </div>
                        </div>
                        <div class="weui-form-preview__ft">
                            <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:"><i
                                    class="fa fa-external-link"> 123</i></a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_default" id="comment1"
                               onclick="comment('1',this)"><i class="fa fa-comment-o"> 234</i>

                            </a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_default no"
                               onclick="thumbsUp('1',this)"><i class="fa fa-thumbs-o-up"> 14</i></a>
                        </div>
                        <div class="weui-form-preview__ft ">
                            <div class="weui-cells weui-cells_form comment" style="display: none">
                                <div class="weui-cell">
                                    <div class="weui-cell__bd">
                                        <textarea class="weui-textarea" placeholder="请输入评论内容" rows="3"></textarea>

                                        <div class="weui-textarea-counter"><span>0</span>/200</div>
                                    </div>
                                </div>
                                <div class="button-sp-area"><a href="javascript:;"
                                                               class="weui-btn weui-btn_mini weui-btn_primary">提交评论</a>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="weui-panel articlelist">
                        <div class="weui-panel__hd">
                            <img src="logo.png" class="headPic">

                            <div class="userName">
                                <h4 class="weui-media-box__title "> cherishgyh</h4>

                                <p class="weui-media-box__desc addTime">2017-04-17 08:08:08</p>
                            </div>
                    <span class="weui-media-box__title addEdit">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">编辑</a>
                    </span>
                        </div>
                        <div class="weui-panel__bd">
                            <div class="weui-media-box weui-media-box_text">
                                <p class="weui-media-box__desc">
                                    <i class="fa fa-book"> #咖啡咖啡</i>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球...
                                </p>

                                <p>
                                    <img src="http://wbs.hzhus.com/public/upload/ad/2017/03-24/fafb920acdae272cdbdd35f23b6ecc58.jpg">
                                </p>

                            </div>
                        </div>
                        <div class="weui-form-preview__ft">
                            <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:"><i
                                    class="fa fa-external-link"> 123</i></a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_default"
                               onclick="comment('1',this)"><i class="fa fa-comment-o"> 234</i></a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_default no"
                               onclick="thumbsUp('1',this)"><i class="fa fa-thumbs-o-up"> 14</i></a>
                        </div>
                        <div class="weui-form-preview__ft ">
                            <div class="weui-cells weui-cells_form comment" style="display: none">
                                <div class="weui-cell">
                                    <div class="weui-cell__bd">
                                        <textarea class="weui-textarea" placeholder="请输入评论内容" rows="3"></textarea>

                                        <div class="weui-textarea-counter"><span>0</span>/200</div>
                                    </div>
                                </div>
                                <div class="button-sp-area"><a href="javascript:;"
                                                               class="weui-btn weui-btn_mini weui-btn_primary">提交评论</a>
                                </div>
                            </div>
                        </div>


                    </div>

                    <!--<div class="articleBottom"></div>-->
                </div>


                <div class="weui-tabbar">
                    <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                    <span style="display: inline-block;position: relative;">
                        <i class="fa fa-home weui-tabbar__icon"></i>
                    </span>

                        <p class="weui-tabbar__label">首页</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <i class="fa fa-comments weui-tabbar__icon"></i>
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>

                        <p class="weui-tabbar__label">动态</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <i class="fa fa-user weui-tabbar__icon"></i>
                            <span class="weui-badge" style="position: absolute;top: -2px;right: -6px;">8</span>
                    </span>

                        <p class="weui-tabbar__label">我的</p>

                    </a>
                </div>


            </div>
        </div>


    </div>
</div>
</body>

<script type="text/javascript">
    //        顶部搜索
    $(function () {
        var $searchBar = $('#searchBar'),
                $searchResult = $('#searchResult'),
                $searchText = $('#searchText'),
                $searchInput = $('#searchInput'),
                $searchClear = $('#searchClear'),
                $searchCancel = $('#searchCancel');

        function hideSearchResult() {
            $searchResult.hide();
            $searchInput.val('');
        }

        function cancelSearch() {
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function () {
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
                .on('blur', function () {
                    if (!this.value.length) cancelSearch();
                })
                .on('input', function () {
                    if (this.value.length) {
                        $searchResult.show();
                    } else {
                        $searchResult.hide();
                    }
                })
        ;
        $searchClear.on('click', function () {
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function () {
            cancelSearch();
            $searchInput.blur();
        });
    });
    //顶部导航
    $(function () {
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
    //底部导航
    $(function () {
        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });

    //点赞
    function thumbsUp(id, obj) {
        if ($(obj).hasClass('no')) {
            $(obj).removeClass('no').addClass('yes');
            $(obj).html("<i class='fa fa-thumbs-up '> 15</i>");
        } else if ($(obj).hasClass('yes')) {
            $(obj).removeClass('yes').addClass('no');
            $(obj).html("<i class='fa fa-thumbs-o-up'> 14</i>");
        } else { // 其他输入框操作
            var value = $(obj).val();
        }
    }
    function comment(id, obj) {
        $('.comment').toggle(function () {
            $('.comment').next().css('display', 'block');
        }, function () {
            $('.comment').next().css("display", "none");
        });
    }
</script>

</html>